
<script>
import { getSys, getJson, saveJson, editJson, delJson} from "@/api";
import { defineComponent,computed, toRefs, ref, reactive, unref, toRaw, provide, onMounted, watchEffect, nextTick } from "vue";
import Upload from "@c/upload.vue";
import Dialog from "@c/dialog.vue";
export default defineComponent({
  components: {
    Upload,
    Dialog,
  },
  setup(_) {
    // UAM_PARAM_SYS
    // const SYS = "UAM_PARAM_SYS";

    const formDialog = ref(null);
    const columns = [
      {
        title: "所属系统",
        dataIndex: "sys",
      },
      {
        title: "所属模块",
        dataIndex: "model",
      },
      {
        title: "文件名",
        dataIndex: "fileName",
      },
      {
        title: "文件路径",
        dataIndex: "filePath",
        ellipsis: true,
      },
      {
        title: "操作",
        slots: { customRender: "action" },
      },
    ];
    const dataMap = reactive({
      form: {
        sys: undefined,
        model: undefined,
        fileName: undefined,
      },
      dialog: {
        sys: undefined,
        model: undefined,
        fileName: undefined,
        filePath: undefined
      },
      pageInfo: {
        defaultPageSize: 10
      },
      rules: {
        sys: [{ required: true, message: "请选择所属系统", trigger: "blur" }],
        model: [
          { required: true, message: "请选择所属模块", trigger: "blur" },
        ],
        fileName: [
          { required: true, message: "请输入文件名", trigger: "blur" },
        ]
      },
      sysList: [],
      dataSource: [],
      check: true,
      isAdd: true,
      loading: false,
      visible: false,
      onSearch() {
        const params = toRaw(dataMap.form)
        dataMap.getData(params)
      },
      handleEdit(row) {
        dataMap.visible = true
        dataMap.isAdd = false
        nextTick(() => {
          dataMap.dialog = JSON.parse(JSON.stringify(row))
        })
        
      },
      handleDel({ id }) {
        console.log('delete', id)
        delJson({ id }).then(res => {
          if (res.code == '0') {
            dataMap.getData({...dataMap.form})
          }
        })
      },
      handAdd(){
        dataMap.visible = true
      },
      handleUpload(file) {
        dataMap.dialog.filePath = file;
      },
      saveForm() {
        formDialog.value.validate().then(valid => {
          if (valid) {
            dataMap.loading = true
            const addItem = toRaw(dataMap.dialog)
            setTimeout(async () => {
              dataMap.loading = false
              
              dataMap.isAdd ? await saveJson(addItem) : await editJson(addItem)
              
              dataMap.close(false)
              dataMap.getData({...dataMap.form})
            }, 2000)
          }
        })
       
      },
      close: (val) => {
        formDialog.value.resetFields()
        dataMap.visible = val;
      },
      getData(params) {
        getJson(params).then((res) => {
          if (res.code == '0') {
            dataMap.dataSource = res.data || [];
            dataMap.pageInfo.total = res.total
          }
        });
      },
      getPageData({ pageSize, current: pageNum }) {
        dataMap.getData({ pageSize, pageNum, ...dataMap.form })
      }
    });
 
    onMounted(() => {

      getSys().then(res => {
        if (res.code == '0') {
          dataMap.sysList = res.data.map(item => ({
            label: item,
            value: item
          }))
        }
      })


      dataMap.getData()
        
      // getDicts(SYS).then((res) => {
      //   if (res.code !== 0) return;
      //   dataMap.sysList = res.data.map((item) => {
      //     let { name, code, available } = item;
      //     return {
      //       label: name,
      //       value: code,
      //       disabled: available == "0",
      //     };
      //   });
      // });
    });

    return {
      ...toRefs(dataMap),
      formDialog,
      columns,
    };
  },
});
</script>

<template>
  <h1 style="margin-bottom: 60px">
    <a-divider>静态文件资源管理</a-divider>
  </h1>
  <a-form ref="formRef" :model="form" style="margin-bottom: 20px">
    <a-row>
      <a-col :span="6">
        <a-form-item label="所属系统" name="sys" :labelCol="{ offset: 3 }">
          <a-select
            v-model:value="form.sys"
            showArrow
            allowClear
            show-search
            :options="sysList"
            placeholder="请选择所属系统"
            style="text-align:left;"
          ></a-select>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="所属模块" name="model" :labelCol="{ offset: 3 }">
          <a-input
            v-model:value="form.model"
            allowClear
            placeholder="请输入所属模块"
          ></a-input>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="文件名" name="fileName" :labelCol="{ offset: 3 }">
          <a-input v-model:value="form.fileName" allowClear placeholder="请输入文件名" />
        </a-form-item>
      </a-col>
      <a-col :span="2">
        <a-form-item>
          <a-button type="primary" html-type="submit" @click="onSearch">搜索</a-button>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
  <div style="margin-bottom: 20px;text-align:left;">
    <a-button type="primary" @click="handAdd">新增</a-button>
  </div>
 
  <a-table
    class="ant-table-striped"
    :pagination="{ ...pageInfo, hideOnSinglePage: true }"
    tableLayout="fixed"
    :columns="columns"
    :data-source="dataSource"
    @change="getPageData"
    bordered
    rowKey='id'
  >
    <template #action="{ record }">
      <a-space :size="10">
        <a-button @click="handleEdit(record)">修改</a-button>
        <a-button danger @click="handleDel(record)">删除</a-button>
      </a-space>
    </template>
  </a-table>

  <Dialog title="新增上传文件" width="800px" @closeDialog="close" :visible="visible" :maskClosable="false" :loading="loading"  @handForm="saveForm">
    <a-form ref="formDialog" :model="dialog" :rules="rules">
      <a-row>
        <a-col :span="8">
          <a-form-item label="所属系统" name="sys">
            <a-input
              v-model:value="dialog.sys"
              placeholder="请输入所属系统"
              allowClear
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="所属模块" name="model" :labelCol="{ offset: 3 }">
            <a-input
              v-model:value="dialog.model"
              placeholder="请输入所属模块"
              allowClear
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="文件名" name="fileName" :labelCol="{ offset: 3 }">
            <a-input
              v-model:value="dialog.fileName"
              placeholder="请输入文件名"
              allowClear
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="文件上传路径" name="filePath" :rules="{required: !dialog.filePath, message: '请上传文件', trigger: 'input' }">
            <a-input
              v-model:value="dialog.filePath"
              disabled
              placeholder="自动生成"
              style="margin-bottom: 10px"
            />
            <Upload @uploadFiles="handleUpload" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </Dialog>
</template>
